import { Button, Empty, Modal, Steps } from 'antd';
import { useState, useEffect, useContext } from 'react';
import ZhpgContext from '../../ZhpgContext';
export default function Zqxq(props) {

    const { zhData, yxfxData, zhjcData } = useContext(ZhpgContext);

    if (!zhData) {
        return <Empty description="请先选择灾害数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
    }
    if (!yxfxData) {
        return <Empty description="未进行影响分析" image={Empty.PRESENTED_IMAGE_SIMPLE} />
    }

    return <div className='fill' style={{
        border: "1px solid #17e6ffb3",
        marginTop: 20,
        padding: "12px 16px",
        borderRadius: 8
    }}>
        {zhData ? <div>
            <div>此次 {zhData.yhlx}灾害位于 {zhData.xzqhmc}，诱发因素为 {zhData.yfys}。威胁户数0户，威胁人数0人，威胁财产约0.0万元</div>
            <div>
                {yxfxData.radius} 公里范围内共影响
                {yxfxData?.datas?.map(item => {
                    return ` ${item.name} ${item.count} 处`
                }).join('，')}
                。
            </div>
            {zhjcData?.jydw && <div>
                {zhjcData?.jydw?.radius} 公里范围内 救援队伍 {zhjcData.jydw?.count} 个。
            </div>}
            {zhjcData?.bncs && <div>
                {zhjcData?.bncs?.radius} 公里范围内 应急避难场所 {zhjcData.bncs?.count} 个。
            </div>}
            {zhjcData?.wzcbd && <div>
                {zhjcData?.wzcbd?.radius} 公里范围内 物资储备库 {zhjcData.wzcbd?.count} 个。
            </div>}
        </div> : <Empty description="请先选择灾害数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
    </div>
}